<template>
	<div class="classification homeProductItem" style="margin-bottom: 0.4rem;">
		<div class="wrapper" :style="{width:screenWidth+'px',height:screenHeight+'px'}" >
			<div class="wrapper-content" :class="{wrapper_trans:true}" :style="{width:screenWidth*2 + 'px',height:screenWidth+'px',}" ref="wrapperContent">
				
				<div class="aui-row wrapper-content-content">
					<div v-if="cateList && cateList.length>0" class="aui-col-5" v-for="(item, index) in cateList" :key="index" @click='jumpEvent(item,index)'>
						<div style="position: relative;width: 100%;height: 0;overflow-y: hidden;padding-bottom: 100%;">
							<img style="width: 100%;" :src="item.publicityPicture||item.imageUrl||item.imgUrl||'static/image/demo1.png'"/>
						</div>
						<div class="aui-grid-label">{{item.relTitle||item.name||item.goodsClassName||item.className}}</div>
					</div>
					
				</div>
				<div class="aui-row wrapper-content-content" v-if="cateListOther && cateListOther.length>0">
					<div v-if="cateListOther && cateListOther.length>0" class="aui-col-5" v-for="(val, index) in cateListOther" :key="index" @click='jumpEvent(val,index)'>
						<div style="position: relative;width: 100%;height: 0;overflow-y: hidden;padding-bottom: 100%;">
							<img style="width: 100%;" :src="val.publicityPicture||val.imageUrl||val.imgUrl||'static/image/demo1.png'"/>
						</div>
						<div class="aui-grid-label">{{val.relTitle||val.name||val.goodsClassName||val.className}}</div>
					</div>
				</div>

			</div>
			<div class="wrapper-buttons" v-if="cateListOther.length>0">
				<span class="wrapper-button" :class="[{'wrapper_on':flag === 0}]"></span>
				<span class="wrapper-button" :class="[{'wrapper_on':flag === 1}]"></span>
			</div>
		</div>
		<div v-if="cateList.length==0 && env == 'edit'" style="height: 2.5rem;line-height: 2.5rem;">暂无数据</div>
	</div>
</template>

<script>
	import { mapGetters , mapMutations} from "vuex";
	import handlePath from "../../utils/lxn/handlePath" 
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				iconwidth: null,
				cateList:[],
				cateListOther:[],
				flag:0
			}
		},
		computed: {
			...mapGetters('xxy', [
				"getseeall"
			]),
			env() {
				return window.environment; // 获取是否是编辑状态
			},
			screenWidth() {
				if (window.environment === "production") {
					return window.innerWidth;
				} else {
					return 375;
				}
			},
			screenHeight() {
				if(window.environment === "production") {
						return window.innerWidth * 0.53;
					} else {
						return 200;
					}
				}
		},
		methods: {
			...mapMutations('xxy', [
				"setseeall",
				"setstoptouch"
			]),
			tendata() {
				this.cateList = []
				let length = this.dataList.length < 10 ? this.dataList.length : 10
				for(var i = 0; i < length; i++) {
					this.cateList.push(this.dataList[i])
				}
			},
			tendataOther(){
				let mewTenArray = this.dataList.slice(10) || []
				this.cateListOther = []
				let length = mewTenArray.length
				for(let i=0; i<length;i++){
					this.cateListOther.push(mewTenArray[i])
				}
				if(this.cateListOther.length > 0){
					this.touch();
				}
			},
			getimg() {
				var result = window.matchMedia('(max-width: 414px)');
				if(result.matches) {
					if(document.querySelectorAll(".aui-col-5")[0]) {
						var colwidth = window.getComputedStyle(document.querySelectorAll(".aui-col-5")[0], null).width
						this.iconwidth = colwidth.substring(0, colwidth.indexOf(".") + 3) - 12;
					}
				} else {
					this.iconwidth = null
				}
			},
			jumpEvent(item, index) {
				// 跳到分类页
				// if(item.extendField) {
				// 	var urldata = JSON.parse(item.extendField).url.path
				// 	this.$router.push({
				// 		path: urldata
				// 	})
				// }
				handlePath(item) && this.$router.push(handlePath(item));
			},
			touch() {
				let self = this;
				let startHandler = function(evt) {
					self.setstoptouch(false)
					self.startx = evt.touches[0].pageX;
					self.offsetx = 0;
				};
				let moveHandler = function(evt) {
					evt.preventDefault();
					self.offsetx = evt.touches[0].pageX - self.startx;
					node.style.left = -self.screenWidth + 'px'
				};
				let endHandler = function(evt) {
					let boundary = self.screenWidth / 6;
					if(self.offsetx >= boundary){
						//进入上一页
						self.go(-1)	
					}else if(self.offsetx < -boundary) {
						//进入下一页
						self.go(1)
					}
				};
				let node = this.$refs.wrapperContent
				node.addEventListener("touchstart", startHandler);
				node.addEventListener("touchmove", moveHandler);
				node.addEventListener("touchend", endHandler);
			},
			go(index) {
				let node = this.$refs.wrapperContent;
				let self = this;
				if(index === 1) {
					self.flag = 1
					node.style.left =  -self.screenWidth + 'px';
				} else if(index===-1){
					self.flag = 0
					node.style.left = 0 + 'px';
				}
			},
		},
		watch: {
			dataList(data) {
				this.tendata()
				this.tendataOther()
			}

		},
		created() {
			this.setseeall(true)
		},
		mounted() {
			// this.touch();
			this.tendata()
			this.tendataOther()
			this.$nextTick(function() {
				this.getimg()
			})
		},
	}
</script>

<style scoped>
	.classification {
		border: none;
		margin-bottom: 0rem;
	}
	.homeProductItem{
		padding:0
	}
	.homeProductItem .aui-col-5 {
		padding: 6px;
	}
	.homeProductItem .aui-col-5 img {
		height: auto;
		margin: 0 auto
	}
	.classification .aui-col-5 .aui-grid-label {
		font-size: 0.6rem;
	}


	.wrapper {
		position: relative;
		overflow: hidden;
	}
	.wrapper-content {
		position: absolute;
		left: 0;
	}
	.wrapper-content-content{
		float:left;
		width:50%
	}
	.wrapper_trans{
		transition: left .2s ease
	}
	.wrapper-buttons {
		position: absolute;
		height: 6px;
		left:45%;
		bottom: 5px;
		z-index: 2;
	}
	
	.wrapper-button {
		float: left;
		width: 15px;
		height: 4px;
		border-radius: 6px;
		background: gray;
		margin: 0 3px;
		cursor: pointer;
	}
	.wrapper_on {
		background-color: royalblue
	}
</style>